<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            background-color: #82878A;
        }

        .blink_wrap {
            position: absolute;
            left: 50%;
            top: 0;
            cursor: pointer;
            width: 73px;
            height: 100px;
            overflow: hidden;
        }

        .blink_wrap .blink {
            margin-top: 30px;
            -webkit-animation: slide 1s infinite linear;
            -moz-animation: slide 1s infinite linear;
            -o-animation: slide 1s infinite linear;
            animation: slide 1s infinite linear;
            cursor: pointer;
            background: url("icon-sale-new.png") 0 0;
            width: 73px;
            height: 29px;
        }

    </style>
</head>
<body>
<div class="blink_wrap">
    <div class="blink"></div>
</div>
<script src="js/jquery.js"></script>
<script>
    $(function () {
        var b = 0, c = 30, d = $(".blink");
        function a() {
            var e = 10;
            0 == b ? c++ : c--, c > 60 && (b = 1), 30 > c && (b = 0, e = 500), d.css("margin-top", c), setTimeout(function () {
                a()
            }, e)
        }

        a()
    })
</script>
</body>
</html>